<template>
    <div>
		<!--省-->
		<div class="merchant" v-show="isprovince">
			<div class="forms" v-for="(item,index) in objprovince" :key="index" @click="isopenprovincelist(item)">
				<label v-text="item.area_name" style=" width: 80%;"></label><i class="fa right fa-angle-right fa-lg iconfont" aria-hidden="true"></i>
			</div>
		</div>
		<!--市-->
		<div class="merchant" v-show="iscityproper">
			<div class="forms" v-for="(item,index) in objcityproper" :key="index" @click="isopencityproperlist(item)">
				<label v-text="item.area_name" style=" width: 80%;"></label><i class="fa right fa-angle-right fa-lg iconfont" aria-hidden="true"></i>
			</div>
		</div>
		<!--区-->
		<div class="merchant" v-show="iscounty">
			<div class="forms" v-for="(item,index) in objcounty" :key="index" @click="isopencountylist(item)">
				<label v-text="item.area_name" style=" width: 80%;"></label><i class="fa right fa-angle-right fa-lg iconfont" aria-hidden="true"></i>
			</div>
		</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isprovince: true,
            iscityproper: false,
            iscounty:false,
            objprovince:{},  //省列表
            objcityproper:{},  //市列表
            objcounty:{},  //区列表
            city:{    //被选中的省市区
                provinceName:'',
                cityName:'',
                areaName:'',
            },
        }
    },
    methods:{
        //获取省列表
        checkGetarealist(){
            var _this = this;
            this.Tools.AXIOS({
                url: 'bank/alist',
                transformRequest: {
                    id : 0,
                },
                success: function (res) {
                    _this.objprovince = res.data.data;
                }
            })
        },
        //获取市列表
        isopenprovincelist(item){
            var _this = this;
            this.isprovince = false,this.iscityproper = true;
            this.Tools.AXIOS({
                url: 'bank/alist',
                transformRequest: {
                    id : item.area_id,
                },
                success: function (res) {
                    _this.city.provinceName = item.area_name;
                    _this.objcityproper = res.data.data;
                }
            })
        },
        //获取区列表
        isopencityproperlist(item){
            var _this = this;
            this.isprovince = false,this.iscityproper = false,this.iscounty = true;
            this.Tools.AXIOS({
                url: 'bank/alist',
                transformRequest: {
                    id : item.area_id,
                },
                success: function (res) {
                    _this.city.cityName = item.area_name;
                    _this.objcounty = res.data.data;
                    if(_this.objcounty.length == 0){
                        _this.isprovince = true,_this.iscityproper = false,_this.iscounty = false;
                        _this.city.areaName = '';
                        _this.$emit('ievent',_this.city);   //将被选中的省市区传递给父组件
                    }
                }
            })
        },
        //获取县列表
        isopencountylist(item){
            var _this = this;
            this.isprovince = true,this.iscityproper = false,this.iscounty = false;
            this.city.areaName = item.area_name;
            this.$emit('ievent',this.city);   //将被选中的省市区传递给父组件
        }
    }
}
</script>
<style scoped>
.merchant{ width: 100%; background: #fff; position: absolute; top: 0; z-index: 1000;}
.merchant .forms{ width: 100%; font-size: .35rem; padding: .4rem 0; border-bottom: 1px solid #F1F1F1;}
.merchant .forms label{ padding-left: .5rem; }
.merchant .forms i{ margin:.1rem .2rem 0 0; }
</style>
